address field

個別

address fieldの「補完」は2種類の文脈がある

libraryなどを使って、郵便番号から他の住所を自動補完する

忘れがちだが考慮すべきこと

海外の住所の人のサポート

割合には依りそうだけども

https://gyazo.com/6192edb7c642799f5f231e7df9c5dca9

郵便番号フィールドで6文字打つと候補が出てくる

候補をクリックすると下記のフォームにも値が入る

これなら、重複している郵便番号にも対応しつつ自動補完ができる

住所field

分ける？分ける場合どう分ける？

「都道府県」「市区町村」「町名以下」の3フィールドが基本

「建物」フィールドはオプション

libraryを使って、郵便番号から住所を補完する場合

user目線では、自動で補完されるので便利

補完されるデータは構造化されているので、「都道府県」や「市区町村」のデータを扱いやすい

その郵便番号の場合、複数の候補を表示して選択させるUIが必要になる

あるいは、その場合は補完しない

また、市区町村の統合などで郵便番号が変わることがある

そのlibraryがちゃんとそれに追随しないといけない

またそのlibraryをupgradeしないといけない

一方で、IMEを使って補完するという選択肢もある

Googleさんだし、市区町村の統合などあってもたぶんメンテされるはず

問題はフォーマットがIMEによって変わりそう

「都道府県」「市区町村」などのデータ構造に分かれていない

どうやって補完する？

特に複数あるとき

業務システムなら、「IMEの変換候補使ってくれ」と言っても行けそう

郵便番号から住所を自動表示する箇所のためにlibraryを入れずに済む

じゃっかん書いてる

validation errorの設計

郵便番号が存在しない

1. オートコンプリート機能に最適化する

2. 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する

3. モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置

4. 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション

日本の住所系のツール

APIを提供する

有料。月額5000円から〜

素のJSという感じ

Reactで使うには微妙かも